<template>
	<div class="app-container drag-container">
		<el-row :gutter="0">
			<el-form ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
				<el-form-item label="课程名称" prop="courseName">
					<el-input placeholder="请输入课程名称" size="small" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" size="mini">搜索</el-button>
					<el-button icon="el-icon-refresh" size="mini">重置</el-button>
				</el-form-item>
			</el-form>
			<el-table v-loading="loading" :data="courseList">
				<el-table-column type="selection" width="55" align="center" />
				<el-table-column label="课程id" align="center" prop="id" />
				<el-table-column label="课程名称" align="center" prop="courseName" />
				<el-table-column label="课程编码" align="center" prop="courseCode" />
				<el-table-column label="课程性质" align="center" prop="courseNature" />
				<el-table-column label="课程属性" align="center" prop="courseAttribute" />
				<el-table-column label="课程学分" align="center" prop="courseCredit" />
				<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
					<template>
						<el-button size="mini" type="text" icon="el-icon-edit">进入训练</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-row>
	</div>
</template>

<script>
import { listCourse } from '@/api/train/course'
export default {
	name: 'Course',
	data() {
		return {
			// 遮罩层
			loading: true,
			// 显示搜索条件
			showSearch: true,
			// 基本课程管理表格数据
			courseList: [],
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				schoolYearId: null,
				collegeId: null,
				termId: null,
				id: null,
				startingUnit: null,
				courseName: null,
				courseCode: null,
				startingUnit: null,
				courseNature: null,
				courseAttribute: null,
				courseCredit: null,
			},
		}
	},
	created() {
		this.getList()
	},
	methods: {
		getList() {
			this.loading = true
			listCourse(this.queryParams).then((response) => {
				this.courseList = response.rows
				console.log('courseList: ', this.courseList)
				this.total = response.total
				this.loading = false
			})
		},
	},
}
</script>

<style>
.drag-container {
	/*background-color: pink;*/
	position: relative;
}
#drag-content {
	padding: 0 5px;
}

@media screen and (max-width: 768px) {
	#drag-content {
		margin-top: 20px;
	}
}
.datagrid-container {
	margin-top: 20px !important;
}
.drag-area {
	height: 100%;
	min-width: 30px;
	/*background-color: green;*/
	/*border: 1px solid red;*/
	position: relative;
}
.drag-tip {
	height: 100%;
	width: 6px;
	position: absolute;
	top: 0;
	right: 0;
	/* background-color: transparent; */
	background-color: #ccc;
}
/*鼠标移入显示可拖动样式*/
.drag-tip:hover {
	cursor: w-resize;
}
</style>
